<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>过滤器</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<Demo/>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		//全局过滤器
		Vue.filter('dateFormater',function(value,str='YYYY年MM-月DD日'){
			return moment(value).format(str)
		})

		const Demo = Vue.extend({
			template:`
				<div>
					<h2>当前是：{{time | dateFormater('YYYY-MM-DD') }}</h2>	
					<h2>当前是：{{time | dateFormater('YYYY年MM-月DD日') }}</h2>	
					<h2>当前是：{{time | dateFormater('YYYY%MM%DD') }}</h2>	
					<h2>当前是：{{time | dateFormater }}</h2>	
				</div>
			`,
			data(){
				return {
					time:Date.now(),
				}
			},
			
			//局部过滤器
			/* filters:{
				dateFormater(value,str='YYYY年MM-月DD日'){
					return moment(value).format(str)
				}
			} */

			// computed实现
			/* computed:{
				fmtTime(){
					return moment(this.time).format('YYYY-MM-DD')
				}
			} */

			//watch实现
			/* watch:{
				time:{
					immediate:true,
					handler(){
						this.fmtTime =  moment(this.time).format('YYYY-MM-DD')
					}
				}
			} */
		})
		
		new Vue({
			el:'#root',
			components:{Demo}
		})
	</script>
</html>